import React, {useEffect, useState} from 'react';
import {ScrollView, View, Text, TouchableOpacity} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import AreaView from '../../components/Layout/AreaView';
import styles from './style';
import {getEnrollDetail} from '../../service/my';

const ApplyDetail = (props) => {
  const {
    route: {
      params: {erId},
    },
  } = props;

  const navigation = useNavigation();
  const [detail, setDetail] = useState({});
  useEffect(() => {
    navigation.setOptions({
      title: '报名详情',
    });
    navigation.addListener('focus', () => {
      getEnrollDetail(erId).then((res) => {
        console.log(res);
        setDetail(res.data);
      });
    });
  }, [navigation]);
  return (
    <AreaView>
      {/* <View style={styles.wrapper_container}>
        <Banner />
      </View> */}
      <ScrollView style={styles.container}>
        <TouchableOpacity  activeOpacity={1} activeOpacity={1} style={styles.list}>
          <Text style={styles.title}>{detail.erTitle}</Text>
          <Text style={styles.desc}>
            活动时间：{detail.beginTime} ～ {detail.endTime}
          </Text>
          <Text style={styles.desc}>活动费用：{detail.fee || '免费'}</Text>
          <Text style={styles.desc}>
            {detail?.content?.replace(/<\/?.+?\/?>/g, '')}
          </Text>
        </TouchableOpacity>
        <View style={styles.btn_container}>
          <TouchableOpacity
            style={styles.edit_btn}
            onPress={() => {
              if (detail?.isEnrolled !== '1') {
                navigation.push('ApplyInfo', detail);
              }
            }}>
            <Text style={styles.btn_text}>
              {detail?.isEnrolled !== '1' ? '我要报名' : '已报名'}
            </Text>
          </TouchableOpacity>
        </View>
      </ScrollView>
    </AreaView>
  );
};

export default ApplyDetail;
